<template>
  <div style="margin-bottom: 1rem;">
    <van-cell-group title="基本信息">
      <van-cell
        title="姓名"
        :value="teacherInfo.realName | nullableText"
        :label="notEditableTioMsg"
      />
      <van-cell
        title="性别"
        :value="teacherInfo.gender | nullableText"
        is-link
        @click="popShow.gender=true"
      />
      <van-cell
        title="出生日期"
        :value="teacherInfo.dateOfBirth | nullableText"
        is-link
        @click="popShow.dateOfBirth = true"
      />
      <van-cell
        title="本人照片"
        label="照片大小不能超过2MB"
      >
        <template #right-icon>
          <van-uploader
            :after-read="doHeadPhotoUpload"
            :max-count="1"
            :max-size="2*1024*1024"
            accept="image/jpg,image/jpeg"
            @oversize="handleOversize"
          >
            <a>
              <van-image
                :src="teacherInfo.photoUrl | urlWithRand"
                height="60"
                width="60"
              />
            </a>
          </van-uploader>
          </a>
        </template>
      </van-cell>
      <van-cell
        title="有效证件类型"
        :value="teacherInfo.idCardTypeShow | nullableText"
        :label="notEditableTioMsg"
      />
      <van-cell
        title="有效证件号码"
        :value="teacherInfo.idCardNumber | nullableText"
        :label="notEditableTioMsg"
      />
      <van-cell
        title="教工号"
        :value="teacherInfo.workerNo | nullableText"
        :label="notEditableTioMsg"
      />
    </van-cell-group>
    <van-cell-group title="联系方式">
      <van-cell
        title="手机/电话号码"
        :value="teacherInfo.phoneNum | nullableText"
        is-link
        @click="popShow.telNumber = true"
      />
      <van-cell
        title="邮箱"
        :value="teacherInfo.email | nullableText"
        is-link
        @click="popShow.email = true"
      />
      <van-cell
        title="通讯地址"
        :value="teacherInfo.address | nullableText"
        is-link
        @click="popShow.address = true"
      />
      <van-cell
        title="QQ号"
        :value="teacherInfo.qqNumber | nullableText"
        is-link
        @click="popShow.qqNumber= true"
      />
      <van-cell
        title="微信号"
        :value="teacherInfo.wechatNumber | nullableText"
        is-link
        @click="popShow.wechatNumber = true"
      />
      <van-cell
        title="办公地址"
        :value="teacherInfo.workAddress | nullableText"
        is-link
        @click="popShow.workAddress = true"
      />
    </van-cell-group>
    <cf-select
      title="选择性别"
      :pop-show="popShow.gender"
      :options="dropdownData.gender"
      :select-confirm="updateGender"
      @pop-change="(val)=>popShow.gender = val"
    />
    <cf-date-time-picker
      title="选择出生日期"
      type="date"
      :pop-show="popShow.dateOfBirth"
      :select-confirm="updateDateOfBirth"
      @pop-change="(val)=>popShow.dateOfBirth = val"
    />
    <cf-input
      title="修改手机/电话号码"
      type="tel"
      :pop-show="popShow.telNumber"
      :input-confirm="updateTelNumber"
      @pop-change="(val)=>popShow.telNumber=val"
    />
    <cf-input
      title="修改邮箱"
      type="text"
      :pop-show="popShow.email"
      :input-confirm="updateEmail"
      @pop-change="(val)=>popShow.email=val"
    />
    <cf-input
      title="修改通讯地址"
      type="text"
      :pop-show="popShow.address"
      :input-confirm="updateAddress"
      @pop-change="(val)=>popShow.address=val"
    />
    <cf-input
      title="修改QQ号码"
      type="number"
      :pop-show="popShow.qqNumber"
      :input-confirm="updateQqNumber"
      @pop-change="(val)=>popShow.qqNumber=val"
    />
    <cf-input
      title="修改微信号号码"
      type="text"
      :pop-show="popShow.wechatNumber"
      :input-confirm="updateWechatNumber"
      @pop-change="(val)=>popShow.wechatNumber=val"
    />
    <cf-input
      title="修改办公地址"
      type="text"
      :pop-show="popShow.workAddress"
      :input-confirm="updateWorkAddress"
      @pop-change="(val)=>popShow.workAddress=val"
    />
  </div>
</template>

<script>

import { getTeacherInfoById, updatePersonalInfo } from '@/api/bussiness/member/teacher'
import { Cell, CellGroup, Toast, Uploader } from 'vant'
import CfSelect from '@/components/CfSelect'
import CfDateTimePicker from '@/components/CfDateTimePicker'
import CfInput from '@/components/CfInput'
import { uploadTeacherPhoto } from '@/api/bussiness/oss/share'

export default {
  name: 'MineCenterTeacherEditInfo',
  filters: {
    nullableText (val) {
      return val != null ? val : '暂未填写'
    }
  },
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Uploader.name]: Uploader,
    [CfSelect.name]: CfSelect,
    [CfDateTimePicker.name]: CfDateTimePicker,
    [CfInput.name]: CfInput
  },
  data () {
    return {
      teacherInfo: { // 教师信息
      },
      notEditableTioMsg: '请联系管理员修改', // 不可编辑的数据提示文本,
      updateFormData: { // 信息更新表单数据
        id: null
      },
      popShow: {
        gender: false,
        dateOfBirth: false,
        telNumber: false,
        email: false,
        address: false,
        qqNumber: false,
        wechatNumber: false,
        workAddress: false
      },
      dropdownData: {
        gender: [
          { label: '男', value: '男' },
          { label: '女', value: '女' }
        ]
      }
    }
  },
  created () {
    this.refreshTeacherInfo()
  },
  methods: {
    refreshTeacherInfo () { // 刷新教师信息
      getTeacherInfoById(this.$route.query.teaId).then(({ data }) => {
        this.teacherInfo = data
        this.updateFormData = { id: data.id }
      }).catch(() => { })
    },
    doHeadPhotoUpload (file) { // 执行上传照片操作
      const formData = new FormData()
      formData.append('photo', file.file)
      formData.append('uid', this.updateFormData.id)
      uploadTeacherPhoto(formData).then(res => {
        this.updateFormData.photoUrl = res.data
        // 更新照片url信息
        this.doUpdatePersonalInfo()
      }).catch(() => { })
    },
    handleOversize () { // 上传的头像大小超过2MB时执行
      Toast.fail('图片大小不能超过2MB')
    },
    doUpdatePersonalInfo () { // 更新个人信息
      updatePersonalInfo(this.updateFormData).then(({ message }) => {
        this.refreshTeacherInfo()
      }).catch(() => { })
    },
    updateGender (val) { // 更新性别
      this.updateFormData.gender = val
      this.doUpdatePersonalInfo()
    },
    updateDateOfBirth (date) { // 更新出生日期
      this.updateFormData.dateOfBirth = date
      this.doUpdatePersonalInfo()
    },
    updateTelNumber (tel) { // 更新电话号码
      this.updateFormData.phoneNum = tel
      this.doUpdatePersonalInfo()
    },
    updateEmail (val) { // 更新邮箱
      this.updateFormData.email = val
      this.doUpdatePersonalInfo()
    },
    updateAddress (val) { // 更新通讯地址
      this.updateFormData.address = val
      this.doUpdatePersonalInfo()
    },
    updateQqNumber (val) { // 更新qq
      this.updateFormData.qqNumber = val
      this.doUpdatePersonalInfo()
    },
    updateWechatNumber (val) { // 更新微信
      this.updateFormData.wechatNumber = val
      this.doUpdatePersonalInfo()
    },
    updateWorkAddress (val) { // 更新办公地址
      this.updateFormData.workAddress = val
      this.doUpdatePersonalInfo()
    }
  }
}
</script>

<style>
</style>
